// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react';

type SvgProps = {
    width?: number;
    height?: number;
}

const SearchHintSVG = ({width, height}: SvgProps) => (
    <svg
        width={width?.toString() || '72'}
        height={height?.toString() || '48'}
        viewBox='0 0 72 48'
        fill='none'
        xmlns='http://www.w3.org/2000/svg'
    >
        <g clipPath='url(#clip0_410_25534)'>
            <path
                d='M35.1353 12.5745H4.8754C4.32086 12.5726 3.77137 12.6798 3.25832 12.8898C2.74526 13.0998 2.27869 13.4087 1.88524 13.7986C1.49178 14.1886 1.17916 14.6521 0.965209 15.1627C0.751261 15.6732 0.640179 16.2208 0.638306 16.7742V35.9654C0.640179 36.5188 0.751261 37.0664 0.965209 37.577C1.17916 38.0875 1.49178 38.551 1.88524 38.941C2.27869 39.331 2.74526 39.6398 3.25832 39.8498C3.77137 40.0599 4.32086 40.167 4.8754 40.1651H9.34115V47.3489L16.0398 40.1651H35.1246C35.6791 40.167 36.2286 40.0599 36.7417 39.8498C37.2547 39.6398 37.7213 39.331 38.1147 38.941C38.5082 38.551 38.8208 38.0875 39.0348 37.577C39.2487 37.0664 39.3598 36.5188 39.3617 35.9654V16.7742C39.3579 15.6585 38.9108 14.5897 38.1185 13.8024C37.3262 13.0151 36.2534 12.5735 35.1353 12.5745Z'
                fill='var(--away-indicator)'
            />
            <path
                d='M16.0398 40.1651H35.1246C35.6791 40.167 36.2286 40.0598 36.7417 39.8498C37.2547 39.6397 37.7213 39.3309 38.1148 38.9409C38.5082 38.5509 38.8208 38.0874 39.0348 37.5769C39.2487 37.0663 39.3598 36.5187 39.3617 35.9653V24.3145C39.3617 24.3145 38.0291 35.0883 37.7897 36.0367C37.5504 36.985 37.0752 38.4039 34.8245 38.6392C32.5738 38.8745 16.0398 40.1651 16.0398 40.1651Z'
                fill='#CC8F00'
            />
            <path
                d='M9.66973 23.6263C10.2089 23.6263 10.7359 23.7859 11.1842 24.0848C11.6324 24.3837 11.9818 24.8085 12.1881 25.3056C12.3944 25.8026 12.4484 26.3496 12.3432 26.8772C12.2381 27.4049 11.9785 27.8896 11.5972 28.27C11.216 28.6504 10.7303 28.9095 10.2015 29.0145C9.67275 29.1194 9.12467 29.0656 8.62657 28.8597C8.12848 28.6538 7.70276 28.3051 7.40323 27.8578C7.10371 27.4105 6.94383 26.8845 6.94383 26.3465C6.94336 25.9892 7.01355 25.6353 7.15038 25.305C7.2872 24.9748 7.48797 24.6747 7.74118 24.422C7.9944 24.1693 8.29509 23.969 8.62602 23.8324C8.95695 23.6959 9.31163 23.6259 9.66973 23.6263Z'
                fill='var(--center-channel-bg)'
            />
            <path
                d='M20.0056 23.6263C20.5447 23.6263 21.0717 23.7859 21.52 24.0848C21.9683 24.3837 22.3177 24.8085 22.524 25.3056C22.7303 25.8026 22.7843 26.3496 22.6791 26.8772C22.5739 27.4049 22.3143 27.8896 21.9331 28.27C21.5518 28.6504 21.0661 28.9095 20.5374 29.0145C20.0086 29.1194 19.4605 29.0656 18.9624 28.8597C18.4643 28.6538 18.0386 28.3051 17.7391 27.8578C17.4396 27.4105 17.2797 26.8845 17.2797 26.3465C17.2792 25.9892 17.3494 25.6353 17.4862 25.305C17.6231 24.9748 17.8238 24.6747 18.077 24.422C18.3303 24.1693 18.6309 23.969 18.9619 23.8324C19.2928 23.6959 19.6475 23.6259 20.0056 23.6263Z'
                fill='var(--center-channel-bg)'
            />
            <path
                d='M30.33 23.6263C30.8693 23.6256 31.3967 23.7846 31.8454 24.083C32.2942 24.3815 32.6441 24.8061 32.851 25.3031C33.0579 25.8001 33.1123 26.3471 33.0076 26.875C32.9028 27.4029 32.6435 27.888 32.2624 28.2688C31.8813 28.6495 31.3956 28.909 30.8667 29.0142C30.3379 29.1195 29.7896 29.0658 29.2913 28.86C28.793 28.6542 28.3671 28.3056 28.0674 27.8582C27.7677 27.4108 27.6077 26.8847 27.6077 26.3465C27.6073 25.9895 27.6773 25.6358 27.8139 25.3058C27.9505 24.9758 28.151 24.6759 28.4038 24.4233C28.6566 24.1706 28.9569 23.9702 29.2874 23.8335C29.618 23.6967 29.9722 23.6263 30.33 23.6263Z'
                fill='var(--center-channel-bg)'
            />
            <path
                d='M3.7787 20.6104C4.08616 19.5244 4.60589 18.5098 5.30794 17.625C6.00999 16.7403 6.88049 16.0028 7.86932 15.4552C7.92789 15.4257 7.97498 15.3776 8.00322 15.3184C8.03145 15.2593 8.03923 15.1925 8.02534 15.1285C8.01145 15.0645 7.97668 15.0069 7.92646 14.9647C7.87625 14.9225 7.81343 14.8982 7.74785 14.8955C5.84009 14.7814 1.98883 15.1878 3.19637 20.5819C3.20911 20.6477 3.24362 20.7074 3.29437 20.7513C3.34513 20.7953 3.4092 20.821 3.47632 20.8242C3.54343 20.8275 3.60972 20.8082 3.66454 20.7695C3.71937 20.7307 3.75956 20.6747 3.7787 20.6104Z'
                fill='#FFD470'
            />
            <path
                opacity='0.4'
                d='M32.3334 7.28991C34.7785 4.81371 37.8644 3.53829 41.5849 3.46985C45.237 3.53829 48.3042 4.80749 50.7866 7.28991C53.2628 9.77233 54.5383 12.8396 54.6067 16.4917C54.5383 20.2122 53.269 23.2919 50.7866 25.7432C48.3042 28.1883 45.237 29.4824 41.5849 29.6068C37.8644 29.4761 34.7847 28.1883 32.3334 25.7432C29.8883 23.2919 28.6004 20.206 28.4698 16.4854C28.6004 12.8334 29.8883 9.76611 32.3334 7.28991Z'
                fill='var(--center-channel-bg)'
            />
            <path
                d='M53.5706 14.1678C52.464 10.5721 50.3691 7.88057 47.2828 6.09868C44.1964 4.31679 40.8181 3.84832 37.1508 4.68784C35.1455 5.20001 33.3983 6.08537 31.8951 7.34293C33.576 5.5084 35.7082 4.23809 38.2863 3.52882C41.9535 2.68929 45.3485 3.16738 48.4626 4.9653C51.5767 6.76321 53.6882 9.46433 54.7948 13.06C55.4751 15.6505 55.4412 18.1323 54.6873 20.502C53.939 22.875 52.5957 24.8683 50.6551 26.4733C52.1121 24.8855 53.1147 23.0208 53.6603 20.8706C54.2005 18.7172 54.1703 16.4876 53.5706 14.1678Z'
                fill='black'
                fillOpacity='0.4'
            />
            <path
                d='M57.6194 15.4776C57.3584 11.6178 55.7919 8.22807 52.9264 5.30846C49.663 2.19708 45.8961 0.638306 41.6257 0.638306C37.3554 0.638306 33.5947 2.19708 30.3313 5.30846C27.2047 8.55591 25.6383 12.2982 25.6383 16.5477C25.6383 20.7973 27.2047 24.5458 30.3313 27.787C33.3274 30.6448 36.7524 32.185 40.6001 32.4077C44.4478 32.6366 47.9971 31.5788 51.2605 29.2468L53.7034 31.6778L56.83 28.5664L54.3871 26.1355C56.7989 22.8942 57.8743 19.3375 57.6194 15.4776ZM50.8689 25.6963C48.3887 28.1272 45.3242 29.4139 41.6755 29.5376C37.9583 29.4077 34.8814 28.1272 32.4323 25.6963C29.9895 23.2653 28.7028 20.1973 28.5722 16.4983C28.7028 12.8673 29.9895 9.81778 32.4323 7.34971C34.8752 4.88783 37.9583 3.61978 41.6755 3.55174C45.3242 3.61978 48.3887 4.88165 50.8689 7.34971C53.3428 9.81778 54.6171 12.8673 54.6855 16.4983C54.6171 20.1973 53.3491 23.2653 50.8689 25.6963Z'
                fill='#BABEC9'
            />
            <path
                d='M67.6182 46.4679C66.8121 46.6983 66.2153 46.6174 65.8276 46.225L53.1453 32.3065C52.7577 31.9142 52.5977 31.4098 52.6592 30.787C52.7207 30.1643 53.1084 29.4668 53.8222 28.6821C54.5975 27.9659 55.2867 27.5549 55.9021 27.4553C56.5174 27.3556 57.0159 27.5362 57.4035 27.9971L71.2488 40.832C71.6364 41.2243 71.698 41.8097 71.4395 42.5944C71.1811 43.3791 70.695 44.1637 69.9873 44.9484C69.2181 45.7331 68.4243 46.2375 67.6182 46.4679Z'
                fill='var(--away-indicator)'
            />
            <path
                d='M68.5465 38.3191L63.3621 43.5465L57.1116 36.6856L61.6961 32.0027L68.5465 38.3191Z'
                fill='#7A5600'
            />
        </g>
        <defs>
            <clipPath id='clip0_410_25534'>
                <rect
                    width='72'
                    height='48'
                    fill='var(--center-channel-bg)'
                />
            </clipPath>
        </defs>
    </svg>

);

export default SearchHintSVG;
